{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The `ClockExtension` Sample\n",
    "\n",
    "The `ClockExtension` sample walks you through how to create a simple .NET Interactive extension and then package it using NuGet.\n",
    "\n",
    "## 1. Build the project\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "  Determining projects to restore...\n",
      "  All projects are up-to-date for restore.\n",
      "  ClockExtension -> C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\net9.0\\ClockExtension.dll\n",
      "\n",
      "Build succeeded.\n",
      "    0 Warning(s)\n",
      "    0 Error(s)\n",
      "\n",
      "Time Elapsed 00:00:03.44\n",
      "  Determining projects to restore...\n",
      "  All projects are up-to-date for restore.\n",
      "  ClockExtension -> C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\net9.0\\ClockExtension.dll\n",
      "C:\\Program Files\\dotnet\\sdk\\9.0.200\\Sdks\\NuGet.Build.Tasks.Pack\\build\\NuGet.Build.Tasks.Pack.targets(221,5): warning NU5104: A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency \"microsoft.dotnet.interactive [1.0.0-beta.24529.1, )\" or update the version field in the nuspec. [C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\ClockExtension.csproj]\n",
      "C:\\Program Files\\dotnet\\sdk\\9.0.200\\Sdks\\NuGet.Build.Tasks.Pack\\build\\NuGet.Build.Tasks.Pack.targets(221,5): warning NU5104: A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency \"microsoft.dotnet.interactive.csharp [1.0.0-beta.24529.1, )\" or update the version field in the nuspec. [C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\ClockExtension.csproj]\n",
      "  The package ClockExtension.1.0.0 is missing a readme. Go to https://aka.ms/nuget/authoring-best-practices/readme to learn why package readmes are important.\n",
      "  Successfully created package 'C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\ClockExtension.1.0.0.nupkg'.\n",
      "\n",
      "    Directory: C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\n",
      "\n",
      "\u001b[32;1mMode   \u001b[0m\u001b[32;1m              LastWriteTime\u001b[0m\u001b[32;1m         Length\u001b[0m\u001b[32;1m Name\u001b[0m\n",
      "\u001b[32;1m----   \u001b[0m \u001b[32;1m             -------------\u001b[0m \u001b[32;1m        ------\u001b[0m \u001b[32;1m----\u001b[0m\n",
      "-a---           2/25/2025 12:52 PM           9673 \u001b[31;1mClockExtension.1.0.0.nupkg\u001b[0m\n",
      "\n"
     ]
    }
   ],
   "source": [
    "# 1. Build the project\n",
    "dotnet build ClockExtension\n",
    "\n",
    "# Clear any older versions of this extension package from your NuGet cache\n",
    "rm ~/.nuget/packages/ClockExtension -Force -Recurse -ErrorAction Ignore\n",
    "\n",
    "# Pack up the NuGet package. \n",
    "dotnet pack ClockExtension /p:PackageVersion=1.0.0 -c Debug\n",
    "\n",
    "# 3. Check that the package is there\n",
    "Get-ChildItem -Recurse ClockExtension*.nupkg\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2. Load the NuGet package \n",
    "\n",
    "Now we're ready to install the extension that's packed in the NuGet package we just built.\n",
    "\n",
    "First, let's make sure the file is there like we expect after the build.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "✅ The package is there!"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "using System.IO;\n",
    "\n",
    "// Create an absolute path since #i doesn't like \n",
    "var debugOutputFolder = new DirectoryInfo(@\".\\ClockExtension\\bin\\Debug\\\").FullName;\n",
    "\n",
    "if (File.Exists(Path.Combine(debugOutputFolder, \"ClockExtension.1.0.0.nupkg\")))\n",
    "{\n",
    "    \"✅ The package is there!\".Display();\n",
    "} \n",
    "else\n",
    "{\n",
    "    \"❌ Something must have gone wrong with the build. The package isn't there.\".Display();\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If the package is there, we can include its location as a NuGet source using the `AddPackageSource` command."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "outputs": [],
   "source": [
    "using Microsoft.DotNet.Interactive;\n",
    "using Microsoft.DotNet.Interactive.Commands;\n",
    "\n",
    "await Kernel.Root.FindKernelByName(\"csharp\").SendAsync(new AddPackageSource(debugOutputFolder));"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now that the package source is added, we can use `#r` to install the package. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><div><strong>Restore sources</strong><ul><li><span>c:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\</span></li></ul></div><div></div><div><strong>Installed Packages</strong><ul><li><span>ClockExtension, 1.0.0</span></li></ul></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "Loading extension script from `C:\\Users\\josequ\\.nuget\\packages\\clockextension\\1.0.0\\interactive-extensions\\dotnet\\extension.dib`"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div><code>ClockExtension</code> is loaded. It adds visualizations for <code><span><a href=\"https://docs.microsoft.com/dotnet/api/system.datetime?view=net-7.0\">System.DateTime</a></span></code> and <code><span><a href=\"https://docs.microsoft.com/dotnet/api/system.datetimeoffset?view=net-7.0\">System.DateTimeOffset</a></span></code>. Try it by running: <code>DateTime.Now</code></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#r \"nuget:ClockExtension,1.0.0\""
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Try the extension\n",
    "\n",
    "As you can see from the output above, when loading the extension is able to explain a bit about what it does. So now we can try it out.\n",
    "\n",
    "It adds a custom formatter for `System.DateTime`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"clockExtension9e208c5808c24faba76528cf1364ce27\"><svg viewBox=\"0 0 40 40\"><defs><radialGradient id=\"grad1\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\"><stop offset=\"0%\" style=\"stop-color:#512bd4;stop-opacity:0\"></stop><stop offset=\"100%\" style=\"stop-color:#512bd4;stop-opacity:.5\"></stop></radialGradient></defs><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#dedede\"></circle><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"url(#grad1)\"></circle><g class=\"marks\"><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line></g><text x=\"0\" y=\"0\" class=\"text\">.NET Interactive</text><line x1=\"0\" y1=\"0\" x2=\"9\" y2=\"0\" class=\"hour\"></line><line x1=\"0\" y1=\"0\" x2=\"13\" y2=\"0\" class=\"minute\"></line><line x1=\"0\" y1=\"0\" x2=\"16\" y2=\"0\" class=\"seconds\"></line><circle cx=\"20\" cy=\"20\" r=\"0.7\" class=\"pin\"></circle></svg><style type=\"text/css\">\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 svg {\r\n",
       "  width: 400px;\r\n",
       "  fill: white;\r\n",
       "  stroke: black;\r\n",
       "  stroke-width: 1;\r\n",
       "  stroke-linecap: round;\r\n",
       "  transform: rotate(-90deg);\r\n",
       "  --start-seconds: 3;\r\n",
       "  --start-minutes: 53;\r\n",
       "  --start-hours: 0;\r\n",
       "}\r\n",
       "\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks {\r\n",
       "  transform: translate(20px, 20px);\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(1) {\r\n",
       "  transform: rotate(30deg); \r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(2) {\r\n",
       "  transform: rotate(calc(2 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(3) {\r\n",
       "  transform: rotate(calc(3 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(4) {\r\n",
       "  transform: rotate(calc(4 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(5) {\r\n",
       "  transform: rotate(calc(5 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(6) {\r\n",
       "  transform: rotate(calc(6 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(7) {\r\n",
       "  transform: rotate(calc(7 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(8) {\r\n",
       "  transform: rotate(calc(8 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(9) {\r\n",
       "  transform: rotate(calc(9 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(10) {\r\n",
       "  transform: rotate(calc(10 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(11) {\r\n",
       "  transform: rotate(calc(11 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .marks > line:nth-child(12) {\r\n",
       "  transform: rotate(calc(12 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .seconds,\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .minute,\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .hour\r\n",
       "{\r\n",
       "  transform: translate(20px, 20px) rotate(0deg);\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .seconds {\r\n",
       "  stroke-width: 0.3;\r\n",
       "  stroke: #d00505;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));\r\n",
       "\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .minute {\r\n",
       "  stroke-width: 0.6;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .hour {\r\n",
       "  stroke: #512bd4;\r\n",
       "  stroke-width: 1;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .pin {\r\n",
       "  stroke: #d00505;\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtension9e208c5808c24faba76528cf1364ce27 .text {\r\n",
       "  font-size: 2px;\r\n",
       "  font-family: \"Segoe UI\",Helvetica,Arial,sans-serif;\r\n",
       "  transform: rotate(90deg) translate(13.5px, -12px);\r\n",
       "  fill: #512bd4;\r\n",
       "  stroke: none;\r\n",
       "}</style><script>\r\n",
       "let svg = document.querySelector(&#39;svg&#39;);\r\n",
       "</script></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "DateTime.Now"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"clockExtension5294da50892c4f89ad4699d3760fcba4\"><svg viewBox=\"0 0 40 40\"><defs><radialGradient id=\"grad1\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\"><stop offset=\"0%\" style=\"stop-color:#512bd4;stop-opacity:0\"></stop><stop offset=\"100%\" style=\"stop-color:#512bd4;stop-opacity:.5\"></stop></radialGradient></defs><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#dedede\"></circle><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"url(#grad1)\"></circle><g class=\"marks\"><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line></g><text x=\"0\" y=\"0\" class=\"text\">.NET Interactive</text><line x1=\"0\" y1=\"0\" x2=\"9\" y2=\"0\" class=\"hour\"></line><line x1=\"0\" y1=\"0\" x2=\"13\" y2=\"0\" class=\"minute\"></line><line x1=\"0\" y1=\"0\" x2=\"16\" y2=\"0\" class=\"seconds\"></line><circle cx=\"20\" cy=\"20\" r=\"0.7\" class=\"pin\"></circle></svg><style type=\"text/css\">\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 svg {\r\n",
       "  width: 400px;\r\n",
       "  fill: white;\r\n",
       "  stroke: black;\r\n",
       "  stroke-width: 1;\r\n",
       "  stroke-linecap: round;\r\n",
       "  transform: rotate(-90deg);\r\n",
       "  --start-seconds: 56;\r\n",
       "  --start-minutes: 34;\r\n",
       "  --start-hours: 12;\r\n",
       "}\r\n",
       "\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks {\r\n",
       "  transform: translate(20px, 20px);\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(1) {\r\n",
       "  transform: rotate(30deg); \r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(2) {\r\n",
       "  transform: rotate(calc(2 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(3) {\r\n",
       "  transform: rotate(calc(3 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(4) {\r\n",
       "  transform: rotate(calc(4 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(5) {\r\n",
       "  transform: rotate(calc(5 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(6) {\r\n",
       "  transform: rotate(calc(6 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(7) {\r\n",
       "  transform: rotate(calc(7 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(8) {\r\n",
       "  transform: rotate(calc(8 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(9) {\r\n",
       "  transform: rotate(calc(9 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(10) {\r\n",
       "  transform: rotate(calc(10 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(11) {\r\n",
       "  transform: rotate(calc(11 * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .marks > line:nth-child(12) {\r\n",
       "  transform: rotate(calc(12 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .seconds,\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .minute,\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .hour\r\n",
       "{\r\n",
       "  transform: translate(20px, 20px) rotate(0deg);\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .seconds {\r\n",
       "  stroke-width: 0.3;\r\n",
       "  stroke: #d00505;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));\r\n",
       "\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .minute {\r\n",
       "  stroke-width: 0.6;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .hour {\r\n",
       "  stroke: #512bd4;\r\n",
       "  stroke-width: 1;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .pin {\r\n",
       "  stroke: #d00505;\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtension5294da50892c4f89ad4699d3760fcba4 .text {\r\n",
       "  font-size: 2px;\r\n",
       "  font-family: \"Segoe UI\",Helvetica,Arial,sans-serif;\r\n",
       "  transform: rotate(90deg) translate(13.5px, -12px);\r\n",
       "  fill: #512bd4;\r\n",
       "  stroke: none;\r\n",
       "}</style><script>\r\n",
       "let svg = document.querySelector(&#39;svg&#39;);\r\n",
       "</script></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#!clock --hour 12 --minute 34 --second 56"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4\"><svg viewBox=\"0 0 40 40\"><defs><radialGradient id=\"grad1\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\"><stop offset=\"0%\" style=\"stop-color:#512bd4;stop-opacity:0\"></stop><stop offset=\"100%\" style=\"stop-color:#512bd4;stop-opacity:.5\"></stop></radialGradient></defs><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#dedede\"></circle><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"url(#grad1)\"></circle><g class=\"marks\"><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line></g><text x=\"0\" y=\"0\" class=\"text\">.NET Interactive</text><line x1=\"0\" y1=\"0\" x2=\"9\" y2=\"0\" class=\"hour\"></line><line x1=\"0\" y1=\"0\" x2=\"13\" y2=\"0\" class=\"minute\"></line><line x1=\"0\" y1=\"0\" x2=\"16\" y2=\"0\" class=\"seconds\"></line><circle cx=\"20\" cy=\"20\" r=\"0.7\" class=\"pin\"></circle></svg><style type=\"text/css\">\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 svg {\r\n",
       "  width: 400px;\r\n",
       "  fill: white;\r\n",
       "  stroke: black;\r\n",
       "  stroke-width: 1;\r\n",
       "  stroke-linecap: round;\r\n",
       "  transform: rotate(-90deg);\r\n",
       "  --start-seconds: 0;\r\n",
       "  --start-minutes: 0;\r\n",
       "  --start-hours: 0;\r\n",
       "}\r\n",
       "\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks {\r\n",
       "  transform: translate(20px, 20px);\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(1) {\r\n",
       "  transform: rotate(30deg); \r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(2) {\r\n",
       "  transform: rotate(calc(2 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(3) {\r\n",
       "  transform: rotate(calc(3 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(4) {\r\n",
       "  transform: rotate(calc(4 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(5) {\r\n",
       "  transform: rotate(calc(5 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(6) {\r\n",
       "  transform: rotate(calc(6 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(7) {\r\n",
       "  transform: rotate(calc(7 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(8) {\r\n",
       "  transform: rotate(calc(8 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(9) {\r\n",
       "  transform: rotate(calc(9 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(10) {\r\n",
       "  transform: rotate(calc(10 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(11) {\r\n",
       "  transform: rotate(calc(11 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .marks > line:nth-child(12) {\r\n",
       "  transform: rotate(calc(12 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .seconds,\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .minute,\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .hour\r\n",
       "{\r\n",
       "  transform: translate(20px, 20px) rotate(0deg);\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .seconds {\r\n",
       "  stroke-width: 0.3;\r\n",
       "  stroke: #d00505;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));\r\n",
       "\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .minute {\r\n",
       "  stroke-width: 0.6;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .hour {\r\n",
       "  stroke: #512bd4;\r\n",
       "  stroke-width: 1;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .pin {\r\n",
       "  stroke: #d00505;\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtensionc6417e54b5f946eba94dcf6fbab0c5f4 .text {\r\n",
       "  font-size: 2px;\r\n",
       "  font-family: \"Segoe UI\",Helvetica,Arial,sans-serif;\r\n",
       "  transform: rotate(90deg) translate(13.5px, -12px);\r\n",
       "  fill: #512bd4;\r\n",
       "  stroke: none;\r\n",
       "}</style><script>\r\n",
       "let svg = document.querySelector(&#39;svg&#39;);\r\n",
       "</script></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#!clock "
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (C#)",
   "language": "C#",
   "name": ".net-csharp"
  },
  "language_info": {
   "name": "polyglot-notebook"
  },
  "polyglot_notebook": {
   "kernelInfo": {
    "defaultKernelName": "csharp",
    "items": [
     {
      "aliases": [],
      "name": ".NET"
     },
     {
      "aliases": [
       "C#",
       "c#"
      ],
      "languageName": "C#",
      "name": "csharp"
     },
     {
      "aliases": [
       "F#",
       "f#"
      ],
      "languageName": "F#",
      "name": "fsharp"
     },
     {
      "aliases": [],
      "languageName": "HTML",
      "name": "html"
     },
     {
      "aliases": [],
      "languageName": "KQL",
      "name": "kql"
     },
     {
      "aliases": [],
      "languageName": "Mermaid",
      "name": "mermaid"
     },
     {
      "aliases": [
       "powershell"
      ],
      "languageName": "PowerShell",
      "name": "pwsh"
     },
     {
      "aliases": [],
      "languageName": "SQL",
      "name": "sql"
     },
     {
      "aliases": [],
      "name": "value"
     },
     {
      "aliases": [
       "frontend"
      ],
      "name": "vscode"
     }
    ]
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
